import QtQuick 2.14

Item {
    id:root
    property alias bgUpText: bgTextUp.text              //背景上半部文本
    property alias bgDownText: bgTextDown.text          //背景下半部文本
    property alias fFrontText: flipableFront.text       //翻页卡片正面
    property alias fBackText: flipableBack.text         //翻页卡片反面

    property string currText : ""

    property alias lineColor: line.color

    Component.onCompleted: {
        pageTurn("0",false)
    }
    function pageTurn(next,up){
        if(next === currText)
            return ;
        if(up){
            //从下往上翻页 -180 到 0
            //先把页翻到下边
            container.state = "down"

            //翻页前准备好文本
            bgUpText = currText
            fBackText = bgUpText

            bgDownText = next
            fFrontText  =  bgDownText

            //开始翻页
            container.state = "pageUp"
        }else{

            //从上往下翻页 0 到 -180
            container.state = "up"

            //背景
            bgUpText = next
            fBackText = bgUpText

            bgDownText = currText
            fFrontText =  bgDownText

            container.state = "pageDown"
        }

        currText = next
        console.log("pageTurn:" + next + up)
//        container.flipped = !container.flipped;
    }
    Rectangle{
        anchors.fill: parent
        color: "black"
        radius: 5

        Item {
            id:upHalf
            width: parent.width
            height: parent.height/2
            anchors.top: parent.top
            clip: true
            Text{
                id:bgTextUp
                color: "white"
//                text:String("%1").arg(num+1)
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.bottom
                font.pixelSize: parent.width
                font.family: "SimHei"
            }

            MouseArea {
                anchors.fill: upHalf;
                onClicked: {
                    //上翻页
                    pageTurn("😄",true)
                }
            }
        }


        Item {
            id:downHalf
            width: parent.width
            height: parent.height/2
            anchors.bottom: parent.bottom
            clip: true
            Text{
                id:bgTextDown
                color: "white"
//                text:String("%1").arg(num)
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.top
                font.pixelSize: parent.width
                font.family: "SimHei"
            }
            MouseArea {
                anchors.fill: downHalf;
                onClicked: {
                    //下翻页
                    pageTurn("😄",false);

                }
            }

        }
    }

    Rectangle{
        id:line
        height: 4
        width:parent.width
        anchors.verticalCenter: parent.verticalCenter
        z:100
    }



    Flipable {
        id: container
        property bool flipped: false
        property int xAxis: 1
        property int yAxis: 0
        property int angle: -180

        width: root.width;
        height: root.height / 2

        clip: true
        front: Rectangle{
            anchors.fill: parent
            color: "black"
            border.color: "red"
            border.width: 0
            radius: 5
            Text{
                id:flipableFront
                color: "white"
//                text:String("%1").arg(num)
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.bottom
                font.pixelSize: root.width
                font.family: "SimHei"
            }
        }

        back: Rectangle{
            anchors.fill: parent
            color: "black"
            radius: 5
            border.color: "red"
            border.width: 0
            Text{
                id:flipableBack
                color: "white"
//                text:String("%1").arg(num+1)
                anchors.horizontalCenter: parent.horizontalCenter
                anchors.verticalCenter: parent.top
                font.pixelSize: root.width
                font.family: "SimHei"
            }
        }
        state: "pageDown"
        transform: Rotation {
            id: rotation;
            origin.x: container.width/2;
            origin.y:container.height
            axis.x: 1;
            axis.y: 0;
            axis.z: 0
//            onAngleChanged: {
//                console.log("angle changeds:" + angle)
//            }
        }

        onStateChanged: {
            console.log(" stateCnahged: " + state)
        }
        states: [
            State {
                name: "pageDown";
                PropertyChanges {
                    target: rotation;
                    angle: -180
                }
            },
            State {
                name: "pageUp";
                PropertyChanges {
                    target: rotation;
                    angle: 0
                }
            },
            State {
                name: "up";
                PropertyChanges {
                    target: rotation;
                    angle: 0
                }
            },
            State {
                name: "down";
                PropertyChanges {
                    target: rotation;
                    angle: -180
                }
            }
        ]

        //状态转换
        transitions:[
            Transition {
                from:"down"
                to: "pageUp"
                NumberAnimation {
                    target: rotation;
                    properties: "angle";
                    duration: 600;

                }
            },
            Transition {
                from:"up"
                to: "pageDown"
                NumberAnimation {
                    target: rotation;
                    properties: "angle";
                    duration: 600;

                }
            }
        ]
    }

}
